<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="header">
        <h1>Header</h1>
        <p>1</p>
      </div>
      
      <div class="topnav">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
      </div>
      
      <div class="row">
        <div class="column">
          <h2>一</h2>
          <p>内容</p>
        </div>
        
        <div class="column">
          <h2>二</h2>
          <p>内容</p>
        </div>
        
        <div class="column">
          <h2>三</h2>
          <p>内容</p>
        </div>
      </div>
      <br>
      <br>
      <br>
      <br>
      <br>
      <div class="row">
        <div class="column1 side">
          <h2>左</h2>
          <p>内容省略</p>
        </div>
        
        <div class="column1 middle">
          <h2>中</h2>
          <p>省略省略......</p>
          <p>再次省略......</p>
        </div>
        
        <div class="column1 side">
          <h2>右</h2>
          <p>内容省略</p>
        </div>
      </div>
      <br>
      <br>
      <br>
      <div class="footer">
        <p>底部/页脚</p>
      </div>
    <style>
        * {
          box-sizing: border-box;
        }
        
        body {
          margin: 0;
        }
        
        /* 设置页眉的样式 */
        .header {
          background-color: #f1f1f1;
          padding: 20px;
          text-align: center;
        }
        
        /* 设置顶部导航栏的样式 */
        .topnav {
          overflow: hidden;
          background-color: #333;
        }
        
        /* 设置 topnav 链接的样式 */
        .topnav a {
          float: left;
          display: block;
          color: #f2f2f2;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
        }
        
        /* 改变鼠标悬停时的颜色 */
        .topnav a:hover {
          background-color: #ddd;
          color: black;
        }
        
        /* 创建并排的三个非等列 */
        .column {
          float: left;
          width: 33.33%;
          padding: 15px;
          background-color: #ddd;
        }
        
        /* 清除列之后的浮动 */
        .row:after {
          content: "";
          display: table;
          clear: both;
        }
        
        /* 响应式布局 - 创建堆叠而非并排的三列 */
        @media screen and (max-width:600px) {
          .column {
            width: 100%;
          }
        }

        .column1 {
          float: left;
          padding: 10px;
          background-color: #ddd;
        }

        /* 左右列 */
        .column1.side {
          width: 25%;
          background-color: #f1f1f1;
        }

        /* 中间列 */
        .column1.middle {
          width: 50%;
        }

        /* 清除列之后的浮动 */
        .row:after {
          content: "";
          display: table;
          clear: both;
        }

        /* 响应式布局 - 创建堆叠而非并排的三列 */
        @media screen and (max-width: 600px) {
        .column1.side, .column1.middle {
        width: 100%;
        }
        }

        .footer {
          background-color: #aaa5a5;
          padding: 10px;
          text-align: center;
        }  
    </style>
</body>
</html>